<template>
  <!-- 控制中心用户表格操作 -->
  <div class="controlCenterBannerUser">
    <div class="bg-white shadow-sm p-1 mb-2 d-flex justify-content-between">
      <div class="">
        <router-link to='/userCenter'>用户中心</router-link> -> 用户信息
      </div>
      <div class="reloadTable d-flex mr-2">
        <img src="@/assets/img/reload.png" alt="" class="topSearchImg mr-1">
        <p @click="reloadWeb" style="cursor: pointer">刷新</p>
      </div>
    </div>
    <div class="bg-white shadow-sm p-1">
      <div class=" mb-4">
        <div class="d-flex">
          <input type="text" v-model="theUserName">
          <button class="btn btn-sm btn-primary" @click="searchUser">查询用户</button>
        </div>
      </div>
      <table class="table table-bordered table-hover" v-if="this.$store.state.getUserTable">
        <thead class="thead-light text-center">
          <tr>
            <th v-if="numberItem"></th>
            <th scope="col" v-if="tableNumFlag" v-for="(v, k) in this.$store.state.getUserTable[0]">{{k}}</th>
            <th scope="col" v-if="!tableNumFlag" v-for="(v, k) in smtitle">{{v}}</th>
            <th>control</th>
          </tr>
        </thead>
        <tbody  v-for="(v, k) in this.$store.state.getUserTable" :key='k'>
          <tr :class="{'rowColor': k % 2}">
            <th v-if="numberItem" scope="row">{{k + 1}}</th>
            <td>{{v.id}}</td>
            <td>{{v.username}}</td>
            <td v-if="tableNumFlag">{{v.sex}}</td>
            <td v-if="tableNumFlag">{{v.email}}</td>
            <td>{{v.token}}</td>
            <td>
              <span v-if="!rootComputed(k)">{{v.root}}</span>
              <select v-if="rootComputed(k)" @change='changeOption(v, k)' v-model="defaultState">
                <option value="false">false</option>
                <option value="true">true</option>
              </select>
            </td>
            <!-- 操作按钮 -->
            <td scope="col" class="d-flex justify-content-center border-0">
              <button class="btn btn-sm btn-primary mr-2 btnText" @click="changeRoot(v, k)" ref="dom" :disabled='btnFlag'>修改</button>
              <button class="btn btn-sm btn-warning text-dark btnText" @click="returnState(v, k)" v-if="rootComputed(k)">取消</button>
              <button class="btn btn-sm btn-danger btnText" @click='deleteUser(v)' v-if="!rootComputed(k)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ControlCenterBannerUser',
    data () {
      return {
        flag: true,
        thisItem: -1,
        commitFlag: false,
        defaultState: '',
        btnFlag: false,
        userData: '',
        descBtnValue: '',
        userData: '',
        getUserData: {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          table: 'user'
        },
        tableNumFlag: '',
        numberItem: '',
        theUserName: '',
        smtitle: [
          'id', 'username', 'token', 'root'
        ]
      }
    },
    beforeRouteEnter(to, from, next) {
      // 在进入当前路由组件前判断屏幕大小来调整表格的渲染数据
      if (window.screen.width > 768) {
        next(vm => {
          vm.tableNumFlag = true;
        })
      } else {
        next(vm => {
          vm.tableNumFlag = false;
        })
      }
      // 独立序号
      if (window.screen.width >= 768) {
        next(vm => {
          vm.numberItem = true;
        })
      } else {
        next(vm => {
          vm.numberItem = false;
        })
      }
    },
    methods: {
       deleteUser(v) {
         let flag = confirm('是否确认删除该用户？');
         if (flag) {
          //  请求删除用户
           this.$store.dispatch('asynDeleteUser', v.id);
           setTimeout(() => {
             window.location.reload();
           }, 100)
         }
      },
      changeRoot(v, k) {
        if (this.commitFlag) {
          // 提交修改用户管理员权限
          this.$store.dispatch('asynChangeRoot', this.userData);
          setTimeout(() => {
            if (this.$store.state.changeRoot === 'success') {
              alert('修改成功');
              window.location.reload();
            }
           }, 1000)
        }

        // 进行判断决定渲染当前数据和当前按钮
        this.thisItem = k;
        this.flag = true;
        this.btnFlag = true;
        this.userData = v;
        
        for (let i = 0; i < this.$refs.dom.length; i++) {
          this.$refs.dom[i].textContent = '修改';
          this.$refs.dom[i].disabled = true;
        }
        this.$refs.dom[k].textContent = '确定';
        this.commitFlag = true;
        this.descBtnValue = v.root;
      },
      returnState(v, k) {
        this.flag = !this.flag;
        this.$refs.dom[k].textContent = '修改';
        this.commitFlag = false;
        this.btnFlag = false;
        this.defaultState = '';
        v.root = this.descBtnValue;
      },
      changeOption(v, k) {
        this.$refs.dom[k].disabled = false;
        v.root = this.defaultState;
        this.userData = v;
      },
      reloadWeb() {
        window.location.reload();
      },
      // 查询用户
      searchUser() {
        this.$store.dispatch('asynGetUserTable', this.theUserName);
      }
    },
    computed: {
      rootComputed() {
        return  k => {
          if (this.thisItem == k){
            return this.flag;
          }
        }
      }
    },
    mounted() {
      // 判断本地用户是否存在，并且判断其管理员权限，然后进行路由跳转判断
      if (localStorage.getItem('userInformation')) {
        this.$store.dispatch('asynHasIdGetUser', this.getUserData);
        setTimeout(() => {
          if (this.$store.state.getChangeUserData.root == 'false') {
            window.location.hash = '/userCenter';
          }
        }, 500);
      }
    },
  }

</script>

<style scoped>
.topSearchImg {
    width: 25px;
    height: 25px;
  }
  
  .reloadTable:hover .topSearchImg {
    transform: rotate(360deg);
    transition: all ease 1s;
  }

  .rowColor {
    background-color: rgb(242, 242, 242);
  }

  .btnText {
    font-size: .7em;
  }
</style>